
import { Tag, Card, Col, Row } from 'antd';
import { ShoppingCartOutlined } from '@ant-design/icons';
import React from 'react';
import { buildProductWithDefSelected, eqProductFilter, IProduct, IProductFilter, IProductWithSelected, productSizesFilter } from "../../models";
import formatPrice from 'utils/formatPrice';
import { ProductSizes } from 'components/ProductSizes';

interface IProps {
    list: IProduct[];
    productFilter: IProductFilter;
    addProductToCart: (product: IProductWithSelected) => void;
}
interface IState{
    list: IProductWithSelected[];
}
export class Products extends React.Component<IProps, IState> {

    constructor(props: IProps) {
        super(props);
        this.state = {
            list: props.list.map(p => buildProductWithDefSelected(p, props.productFilter)),
        };
    }

    componentDidUpdate(prevProps: Readonly<IProps>, _: Readonly<IState>, snapshot?: any): void {
        if (prevProps.list === this.props.list
            && eqProductFilter(prevProps.productFilter, this.props.productFilter)) return;
        this.setState({
            list: this.props.list.map(p => buildProductWithDefSelected(p, this.props.productFilter)),
        });
    }

    onProductSizeFilter(product: IProductWithSelected, selectSize: string) {
        product.selectedOptions.selectedSize = selectSize;
    }

    render() {
        const products = this.state.list.map(item => {
            const formattedPrice = formatPrice(item.price, item.currencyId);
            let productInstallment = null;
            if (item.installments) {
                //有分期付款信息
                const installmentPrice = item.price / item.installments;
                productInstallment = (
                    <>
                        <span>or {item.installments} x</span>
                        <b>
                            {item.currencyFormat}
                            {formatPrice(installmentPrice, item.currencyId)}
                        </b>
                    </>
                );
            }
            return (
                <Col className='productItem' key={item.id}>
                    <Card
                        className='productCart'
                        hoverable={true}
                        headStyle={{ position: 'absolute', border: 'none', right: '0', padding: '0' }}
                        cover={<img alt={item.title} src={require(`static/products/${item.sku}-1-cart.webp`)} />}
                        actions={[
                            <ShoppingCartOutlined key="setting" className='btnAddToCart' onClick={() => this.props.addProductToCart(item)}></ShoppingCartOutlined>,
                        ]}
                        extra={(<Tag className='productRTag'>Free shipping</Tag>)}
                    >
                        <>
                            <div className='productTitle'>
                                {item.title}
                            </div>
                            <div className='productSizes'>
                                <Row gutter={[1, 1]} justify="center">
                                    <ProductSizes sizes={productSizesFilter(item, this.props.productFilter)}
                                        selectedSizes={[item.selectedOptions.selectedSize]}
                                        onFilter={(selectedSizes) => this.onProductSizeFilter(item, selectedSizes[0])}
                                        colProps={{ span: 6 }} />
                                </Row>
                            </div>
                            <div className='productPrices'>
                                <small>{item.currencyFormat}</small>
                                <b>{formattedPrice.substring(0, formattedPrice.length - 3)}</b>
                                <span>{formattedPrice.substring(formattedPrice.length - 3)}</span>
                            </div>
                            <div className='productInstallment'>
                                {productInstallment}
                            </div>
                        </>
                    </Card>
                </Col>
            );
        });
        return (
            <>
                {products}
            </>
        );
    }
}

export default Products;
